<template>
  <!-- 图标列表 -->
  <div class="iconList">
    <div class="iconItem" v-for="(item, index) in listInfo" :key="index">
      <div class="bgCircle">
        <span :class="item.iconName"></span>
      </div>
      <span class="title">{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue"; //变量响应式

export default {
  data() {
    return {};
  },
  setup() {
    const listInfo = reactive([
      {
        iconName: ["iconfont", "icon-rili"],
        title: "每日推荐",
      },
      {
        iconName: ["iconfont", "icon-shouyinji"],
        title: "私人FM",
      },
      {
        iconName: ["iconfont", "icon-gedan"],
        title: "歌单",
      },
      {
        iconName: ["iconfont", "icon-paihang"],
        title: "排行榜",
      },
      {
        iconName: ["iconfont", "icon-zhiboziyuan"],
        title: "直播间",
      },
    ]);

    function changeTitle(index) {
      console.log("clicked");
      listInfo[index].title = "超级帅";
    }

    return { listInfo };
  },
};
</script>

<style lang="less" scoped>
.iconList {
  margin-top: 0.2rem;
  display: flex;
  justify-content: space-around;
  .iconItem {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .bgCircle {
      background-color: #ff5838;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: relative;
      .iconfont {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.4rem;
        color: #fff;
      }
    }
    .title {
      font-size: 0.24rem;
      text-align: center;
      margin-top: 0.1rem;
    }
  }
}
</style>
